﻿@namespace BlazorDemos.Shared

@inject IJSRuntime JsRuntime;
@inject NavigationManager UriHelper;

@if (IsMainLayout)
{
    <div class="sb-left-pane-header">
        <div class="sf-preferences-header">Preferences</div>
    </div>
    <div class="sf-preferences-item sf-preference-theme-section">
        <div class='sf-preference-label'>
            <div class="sb-icons sf-preference-icons"></div>
            <div class="sf-preference-text">Theme Selection</div>
        </div>
        @{
            var themeName = SampleUtils.GetThemeName(UriHelper.Uri);
            var selectedTheme = SampleUtils.ThemeData.Where(item => item.ID == themeName).ToList();
            var currentTheme = SampleUtils.ThemeData.First().Text;
            if (selectedTheme.Any())
            {
                currentTheme = selectedTheme.First().Text;
            }
        }
    <div>
        <DropDownComponent DataSource="@SampleUtils.ThemeData" Value="@currentTheme" OnSelect="OnThemeChange"></DropDownComponent>
    </div>
    </div>
    <div class='sf-preferences-item sf-preference-culture'>
        <div class='sf-preference-label'>
            <div class='sb-icons sf-preference-icons'></div>
            <div class='sf-preference-text'>Localization</div>
        </div>
        <div>
            <CultureSwitcher />
        </div>
    </div>
}
else
{
    <div class='@popupClass' @onclick="@OnPreferenceClick">
        <div class='sf-preferences-header'>
            <span>Preferences</span>
        </div>
        <div class='sf-preferences-content'>
            <div class='sf-preferences-item sf-preference-responsive'>
                <div class='sf-preference-label'>
                    <div class='sb-icons sf-preference-icons'></div>
                    <div class='sf-preference-text'>Mode Selection</div>
                </div>
                <div class='sf-preference-btn-group'>
                    <div role="button" tabindex="0" class="@touchClass" @onclick="@OnTouchClick" title="Increased padding for actionable items to accommodate user touches">Touch</div>
                    <div role="button" tabindex="0" class="@mouseClass" @onclick="@OnMouseClick" title="Default control sizes, optimized for use with mouse">Mouse</div>
                </div>
            </div>
            <div class='sf-preferences-item sf-preference-culture'>
                <div class='sf-preference-label'>
                    <div class='sb-icons sf-preference-icons'></div>
                    <div class='sf-preference-text'>Localization</div>
                </div>
                <div>
                    <CultureSwitcher />
                </div>
            </div>
            <div class="sf-preference-translate">
                <span>*Translated by Google Translator.</span>
            </div>
        </div>
    </div>
}


@code {
    private string touchClass { get; set; }
    private string mouseClass { get; set; }
    private string popupClass { get; set; }
    private bool isPopupClicked { get; set; }

    /// <summary>
    /// Specifies the rendering mode of preferences.
    /// </summary>
    [Parameter]
    public bool IsMainLayout { get; set; }

    // Touch mode click handler.
    private async Task OnTouchClick()
    {
        touchClass = SampleUtils.AddClass(touchClass, SampleUtils.ACTIVE_CLASS);
        mouseClass = SampleUtils.RemoveClass(mouseClass, SampleUtils.ACTIVE_CLASS);
        await this.JsRuntime.InvokeVoidAsync("sfBlazorSB.setBiggerSize", true);
    }

    // Mouse mode click handler.
    private async Task OnMouseClick()
    {
        mouseClass = SampleUtils.AddClass(mouseClass, SampleUtils.ACTIVE_CLASS);
        touchClass = SampleUtils.RemoveClass(touchClass, SampleUtils.ACTIVE_CLASS);
        await this.JsRuntime.InvokeVoidAsync("sfBlazorSB.setBiggerSize", false);
    }

    // Preference popup click handler.
    private void OnPreferenceClick()
    {
        isPopupClicked = true;
    }

    // Theme switcher handler for devices
    private void OnThemeChange(DropDownData args)
    {
        var currentTheme = SampleUtils.GetThemeName(UriHelper.Uri);
        if (currentTheme != args.ID)
        {
            var url = SampleUtils.GetThemeUrl(UriHelper.Uri, args.ID);
            UriHelper.NavigateTo(url, true);
        }
    }

    /// <summary>
    /// Show or hide the preferences popup element.
    /// </summary>
    /// <param name="isOpen">Specifies the bool value to show or hide popup element.</param>
    public void ShowPopup(bool isOpen = true)
    {
        if (isOpen)
        {
            popupClass = SampleUtils.RemoveClass(popupClass, SampleUtils.DISPLAY_NONE);
        }
        else
        {
            popupClass = SampleUtils.AddClass(popupClass, SampleUtils.DISPLAY_NONE);
        }
        StateHasChanged();
    }

    /// <summary>
    /// Returns bool value for the popup click action.
    /// </summary>
    public bool IsPopupClicked()
    {
        return isPopupClicked;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        touchClass = SampleUtils.PREFERENCES_TOUCH;
        mouseClass = SampleUtils.PREFERENCES_MOUSE + SampleUtils.SPACE + SampleUtils.ACTIVE_CLASS;
        popupClass = SampleUtils.PREFERENCES_POPUP_CLASS + SampleUtils.SPACE + SampleUtils.DISPLAY_NONE;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        isPopupClicked = false;
        if (firstRender)
        {
            var preferenceMode = await JsRuntime.InvokeAsync<string>("sfBlazorSB.getPreferenceMode");
            // Set touch button as default for higher resolution displays.
            if (preferenceMode != SampleUtils.DEFAULT_MODE)
            {
                touchClass = SampleUtils.AddClass(touchClass, SampleUtils.ACTIVE_CLASS);
                mouseClass = SampleUtils.RemoveClass(mouseClass, SampleUtils.ACTIVE_CLASS);
                StateHasChanged();
            }
        }
    }
}
